<template>
  <w-modal ref="WModal" :title="title" :success-func="successFunc">
    <template v-slot:default>
      <a-form-item label="标题">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入' }], initialValue: model ? model.name : '' }]"
          type="text"
          placeholder="请填写标题..."
        />
      </a-form-item>
      <a-form-item label="索引">
        <a-select
          v-decorator="[
            'index',
            { rules: [{ required: true, message: '请选择' }], initialValue: model ? model.index : 0 },
          ]"
        >
          <a-select-option v-for="item in 10" :key="item" :value="`${item - 1}`">
            {{ item - 1 }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分组">
        <a-switch v-decorator="['group', { valuePropName: 'checked', initialValue: model ? model.group : isGroup }]" :disabled="!!model" @change="groupChange" />
      </a-form-item>
      <template v-if="!isGroup">
        <a-form-item label="类型" prop="type">
          <a-select
            v-decorator="['type',{ rules: [{ required: true, message: '请选择' }], initialValue: model ? model.type : null }]"
          >
            <a-select-option v-for="item in types" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item prop="path" label="URL">
          <a-input
            v-decorator="['path',{ rules: [{ required: true, message: '请选择' }], initialValue: model ? model.path : null }]"
            type="text"
            placeholder="请填写路径..."
          />
        </a-form-item>
      </template>
      <a-form-item label="描述">
        <a-input
          v-decorator="['describe',{ initialValue: model ? model.describe : '' }]"
          type="textarea"
        />
      </a-form-item>
    </template>
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Admin } from '@/config/api'
import WModal, { ModalFormComType } from '@/components/global/modal/form'
import ApiModel from '@/models/api'

@Component({
  name: 'ComAdminAuthApiAdd',
  components: {
    WModal
  }
})
export default class ComAdminAuthApiAdd extends Vue {
  model: ApiModel | null = null;

  types = ['GET', 'PUT', 'POST', 'DELETE'];
  superModel: any = null;
  root = false
  isGroup = false

  get title () {
    return `${this.model ? '编辑' : '添加'}${
      this.isGroup ? '分组' : 'API'
    }`
  }

  groupChange (isGroup: boolean) {
    this.isGroup = isGroup
  }

  /**
   * 显示
   */
  show (root: boolean, model: ApiModel | null, superModel: any) {
    this.model = model || null
    this.superModel = superModel
    this.isGroup = model ? model.group : false
    this.root = root;
    (this.$refs.WModal as ModalFormComType).show()
  }

  /**
   * 确定按钮点击
   */
  async successFunc (values: any) {
    const method = this.model ? '$put' : '$post'
    const api = this.model ? `${Admin.auth.api.update}${this.model._id}` : Admin.auth.api.create
    await this.$wAxios[method](api, {
      ...values,
      root: this.root,
      superId: this.superModel ? this.superModel._id : null
    })
    this.$emit('reload')
  }
}
</script>

<style scoped></style>
